<template>
  <div class="addCamera">
    <el-button v-if="showBtn" @click="handleClick" v-bind="$attrs">
      <slot>新增</slot>
    </el-button>
    <el-dialog class="d1" :title="title" :visible.sync="visible" append-to-body width="500px" @close="onClose">
      <el-form :model="form" ref="form" v-loading="loading" class="form rules" :rules="rules" label-width="120px" size="mini">
        <el-form-item class="is-required" label="摄像头名称：" prop="deviceName">
          <el-input v-model.trim="form.deviceName" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item class="is-required" label="摄像头编号：" prop="number">
          <el-input v-model.trim="form.number" size="small" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- <el-form-item class="is-required" label="摄像头验证码：" prop="validateCode">
          <el-input v-model.trim="form.validateCode" size="small" placeholder="请输入"></el-input>
        </el-form-item> -->
        <!-- <el-form-item class="is-required" label="摄像头Token：" prop="accessToken">
          <el-input v-model.trim="form.accessToken" :disabled="isEdit" size="small" placeholder="请输入"></el-input>
        </el-form-item> -->
        <!-- <el-form-item class="is-required" label="所属NVR：" prop="nvrId">
          <selector type="nvr" size="small" style="width: 160px" clearable placeholder="请选择所属nvr" v-model="form.nvrId"></selector>
        </el-form-item> -->
        <el-form-item class="is-required" label="通道号：" prop="channel">
          <el-input v-model.trim="form.channel" size="small" placeholder="请输入" type="number" min="1"></el-input>
        </el-form-item>
        <el-form-item class="is-required" label="摄像头类型：" prop="cameraType">
          <selector type="cameraType" size="small" style="width: 160px" clearable placeholder="请选择设备类型" v-model="form.cameraType"></selector>
        </el-form-item>
        <el-form-item class="is-required" label="所属供应商：" prop="supplierId">
          <selector type="deviceSupply" size="small" style="width: 160px" clearable placeholder="请选择供应商" v-model="form.supplierId"></selector>
        </el-form-item>
        <el-form-item class="is-required" label="所属点位：" prop="pointId">
          <selector type="devicePoint" size="small" style="width: 160px" clearable placeholder="请选择所属点位" v-model="form.pointId"></selector>
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model.trim="form.description" size="small" placeholder="请输入" type="textarea"></el-input>
        </el-form-item>
        <div class="align-r">
          <el-button size="small" @click="visible=false">取 消</el-button>
          <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import selector from "@/views/components/selector";
  import { addCamera, updateCamera, checkCameraName } from "@/api/page/monitoring.js";
  export default {
    components: {
      selector
    },
    props: {
      showBtn: {
        type: Boolean,
        default: true
      },
      info: {
        type: Object,
        default: () => ({})
      },
      edit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        loading: false,
        visible: false,
        title: "",
        // isEdit: false,
        form: {},
        updateDeviceName: undefined, // 编辑时的名字
        rules: {
          deviceName: [{
            required: true,
            message: "名称不能为空"
          }, {
            validator: (rule, value, callback) => {
              if (this.updateDeviceName!=value) {
                checkCameraName(value).then(res => {
                  if (res.data.length > 0) {
                    callback('名称已经存在')
                  } else {
                    callback()
                  }
                })
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }],
          number: {
            required: true,
            message: "编号不能为空"
          },
          // validateCode: {
          //   required: true,
          //   message: "验证码不能为空"
          // },
          // nvrId: {
          //   required: true,
          //   message: "请选择所属NVR"
          // },
          channel: {
            required: true,
            message: "通道号不能为空"
          },
          cameraType: {
            required: true,
            message: "请选择摄像头类型"
          },
          supplierId: {
            required: true,
            message: "请选择供应商"
          },
          pointId: {
            required: true,
            message: "请选择部署点位"
          }
        }
      };
    },
    methods: {
      onClose() {
        this.$refs["form"].clearValidate();
      },
      handleClick() {
        this.visible = true;
        if (this.edit) {
          var obj = this.info;
          this.form = {
            cameraId: obj.cameraId,
            deviceName: obj.device.deviceName,
            number: obj.device.number,
            // validateCode: obj.validateCode,
            // accessToken: obj.accessToken,
            // nvrId: obj.nvrId,
            channel: obj.channel,
            cameraType: obj.cameraType,
            supplierId: obj.device.supplierId,
            pointId: obj.device.pointId,
            description: obj.device.description
          };
          this.title = "编辑摄像头";
          this.updateDeviceName = obj.device.deviceName;
          // this.isEdit = true;
        } else {
          this.form = {};
          this.title = "新增摄像头";
          // this.isEdit = false;
        }
        console.log(this.form);
      },
      async handleSubmit(data) {
        this.$refs["form"].validate(async valid => {
          if (valid) {
            let self = this;
            self.loading = true;
            if (this.form.cameraId) {
              updateCamera(this.form)
                .then(response => {
                  self.loading = false;
                  self.visible = false;
                  self.msgSuccess("修改成功!");
                  self.$parent.initCameraList();  // 重新渲染摄像头切换
                })
                .catch(err => {
                  self.loading = false;
                  self.msgError(err.msg);
                });
            } else {
              addCamera(this.form)
                .then(response => {
                  self.loading = false;
                  self.visible = false;
                  self.msgSuccess("添加成功!");
                  self.$parent.initCameraList();  // 重新渲染摄像头切换
                })
                .catch(err => {
                  self.loading = false;
                  self.msgError(err.msg);
                });
            }
          }
        });
      }
    }
  };
</script>
